<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="keywords" content="小说,小说网,玄幻小说,武侠小说,都市小说,历史小说,网络小说,言情小说,青春小说,原创网络文学">
    <meta name="description" content="小说阅读,精彩小说尽在起点中文网. 起点中文网提供玄幻小说,武侠小说,原创小说,网游小说,都市小说,言情小说,青春小说,历史小说,军事小说,网游小说,科幻小说,恐怖小说,首发小说,最新章节免费">
    <link rel="shortcut icon" href="/images/favicon.0.2.ico">
    <title>个人信息_起点中文网</title>
    <link rel="stylesheet" href="/dist/frozen/css/frozen.css">
    <link rel="stylesheet" href="/css/sprite.css">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/css/my.css">
    <% include head.ejs%>
    <style>
        .ui-form-item{
            height:auto;
        }
        .ui-form-item img{
            border: 0;
            background: 0 0;
            padding:5px;
            padding-left: 75px;
            height:35px;
            width:35px;
            display: block;
        }
        .ui-form-item input, .ui-form-item textarea{
            padding-left: 75px;
        }
        .ui-form-item>.ui-select {
            margin-left: 75px;
        }
        .ui-form-item label:not(.ui-switch):not(.ui-checkbox):not(.ui-checkbox-s):not(.ui-radio) {
            width: 75px;
        }
        .yulan{
            position: fixed;
            z-index: 100;
            width:100%;
            height:100%;
            top:0;
            left:0;
            display: none;
            justify-content: center;
            align-items: center;
            background-color: rgba(0,0,0,.5);
        }
        .ui-border-b {
            border-bottom: 1px solid #f0f1f2;
        }
        .ui-border-t {
            border-top: 1px solid #f0f1f2;
        }
    </style>
</head>
<body>
<div class="page page-bookshelft-my">
    <div class="content">
        <header id="header" class="header" data-l1="41">
            <a href="/user" class="header-back jsBack" data-eid="mqd_G14">
                <i class="icon"></i>
            </a>
            <h1 class="header-back-title" id="title">个人信息</h1>
        </header>
        <div style="margin-top:10px;">
            <div class="ui-form ui-border-t">
                <form action="#">
                    <div class="ui-form-item ui-form-item-show ui-form-item-link ui-border-b" id="headimgbtn">
                        <label for="#">头像</label>
                        <img src="/up/images/head/head.png" alt="" id="headimg">
                    </div>
                    <div class="ui-form-item ui-form-item-show ui-border-b">
                        <label for="#">账号</label>
                        <input type="text" value="swh" disabled readonly id="username">
                    </div>
                    <div class="ui-form-item ui-form-item-show ui-border-b">
                        <label for="#">昵称</label>
                        <input type="text" value="琪琪" readonly id="nickname">
                    </div>
                    <div class="ui-form-item ui-form-item-show ui-border-b">
                        <label for="#">邮箱</label>
                        <input type="text" value="1057607246@qq.com" readonly id="email">
                    </div>
                    <div class="ui-form-item ui-form-item-show ui-border-b">
                        <label for="#">年龄</label>
                        <input type="text" value="39" readonly id="age">
                    </div>
                    <div class="ui-form-item ui-form-item-show ui-border-b">
                        <label for="#">性别</label>
                        <div class="ui-select">
                            <select id="sex">
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="ui-form-item ui-form-item-show ui-border-b">
                        <label for="#">简介</label>
                        <textarea type="text"  readonly id="desc">暂无简介</textarea>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="yulan">
        <img src="" width="100%" alt="头像" id="pic">
    </div>
</div>
<% include footer.ejs %>
</body>
<script>
    _$(function(){
        var nickname="";
        var age="";
        var desc="";
        _$.post('/getuserHeadimg',function(data){
            console.log(data);
            if(data['code']==1) {
                var userinfo = data['info']['userinfo'];
                var username = data['info']['username'];
                _$("#headimg").attr('src',userinfo['imgurl']);
                _$("#username").val(username['username']);
                _$("#nickname").val(userinfo['nickname']);
                _$("#email").val(username['email']);
                _$("#age").val(username['age']);
                _$("#sex option").each(function(){
                    if(_$(this).val()==username['sex']){
                        _$("#sex").find('option').removeAttr('selected');
                        _$(this).attr('selected',true);
                    }
                })
                _$("#desc").val(userinfo['desc']);
            }
        })
        _$("#headimg").click(function(ev){
            ev.stopPropagation();
            _$('.yulan').css('display','flex');
            _$("#pic").attr('src',_$(this).attr('src'));
        })
        _$('.yulan').click(function(){
            _$(this).fadeOut();
        })
        _$("#headimgbtn").click(function(ev){
            location.href='/user/info/headimg';
        })
        _$("#nickname").click(function(){
            _$(this).removeAttr('readonly').focus();
            nickname=_$(this).val();
        });
        _$("#nickname").blur(function(){
            var val=_$(this).val();
            var tath=_$(this);
            if(val==""){
                tip("昵称不能为空");
            }else if(val.length>16){
                tip("昵称不能大于16个字");
            }else{
                if(nickname==val){
                    tath.attr('readonly',true);
                }else{
                    _$.post('/setUserInfo',{type:'nickname',value:val},function(data){
                        if(data.code==1){
                            tip(data.msg);
                        }else{
                            tip(data.msg);
                        }
                        tath.attr('readonly',true);
                    })
                }
            }
        })
        _$("#age").click(function(){
            _$(this).removeAttr('readonly').focus();
            age=_$(this).val();
        });
        _$("#sex").change(function(){
            var val=_$("#sex").val();
            _$.post('/setUserInfo', {type: 'sex', value: val}, function (data) {
                if (data.code == 1) {
                    tip(data.msg);
                } else {
                    tip(data.msg);
                }
            })
        })
        _$("#age").blur(function(){
            var val=parseInt(_$(this).val());
            var tath=_$(this);
            if(val==""){
                tip("年龄不能为空");
            }else if(val>100){
                tip("年龄不能大于100");
            }else if(val<0){
                tip("年龄不能小于0");
            } else if(isNaN(val)){
                tip("年龄必须为数字");
            }else{
                if(age==val){
                    tath.attr('readonly',true);
                }else {
                    _$.post('/setUserInfo', {type: 'age', value: val}, function (data) {
                        if (data.code == 1) {
                            tip(data.msg);
                        } else {
                            tip(data.msg);
                        }
                        tath.attr('readonly',true);
                    })
                }
            }
        })
        _$("#desc").click(function(){
            _$(this).removeAttr('readonly').focus();
            desc=_$(this).val();
        });
        _$("#desc").blur(function(){
            var val=_$(this).val();
            var tath=_$(this);
            if(val==""){
                tip("简介不能为空");
            }else if(val.length>300){
                tip("简介不能大于300字");
            }else{
                if(desc==val){
                    tath.attr('readonly',true);
                }else {
                    _$.post('/setUserInfo', {type: 'desc', value: val}, function (data) {
                        if (data.code == 1) {
                            tip(data.msg);
                        } else {
                            tip(data.msg);
                        }
                        tath.attr('readonly',true);
                    })
                }
            }
        })
    })
</script>
</html>